<template>
	<view>
		<view class="content">
			<view class="top">
				<view class="cut" @click="site=true">
					{{label}}
					<image src="../static/xia.png"></image>
				</view>
			</view>
			<view v-if="list.length>0">
				<view class="date" v-for="(item,index) in list" :key="index">
					<view class="list" :style="item.who_list==1?'background: #cdd5de;':''">
						<view class="view">
							<view class="name">
								蜂巢编号
							</view>
							<view class="text">
								{{item.pid}}
							</view>
						</view>
						<view class="view">
							<view class="name">
								凭证状态
							</view>
							<view class="text">
								{{item.text}}
							</view>
						</view>
						<view class="view">
							<view class="name">
								结束时间
							</view>
							<view class="text">
								{{item.time}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="none" v-else>
				<view class="none-view">
					<image src="../../../static/image/none.png" class="none-image"></image>
					<view class="none-name">
						暂无相关数据~
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="site" :list="list1" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				list1: [{
					value: 1,
					label: '已完成'
				}, {
					value: 2,
					label: '已取消'
				}],
				site: false,
				label: "已完成",
				value: 1,
				list: [],
				page: 1
			}
		},
		onLoad(option) {
			than = this;
			than.getList()
		},
		onReachBottom() {
			than.page++;
			than.getList()
		},
		methods: {
			confirm(e) {
				than.label = e[0].label
				than.value = e[0].value
				than.page = 1
				than.getList()
			},
			getList() {
				than.post("api/trade/listOfEndVoucher", {
					page: than.page,
					type: than.value
				}, function(data) {
					for (let i in data) {
						switch (data[i].type) {
							case 'NOT_SUMBIT_IN_TEN_MINUTES':
								data[i].text = "三十分钟未上传"
								break;
							case 'NOT_SUMBIT_FOR_SECOND':
								data[i].text = "未二次上传"
								break;
							case 'CANCELLED_BUYER':
								data[i].text = "买家确认申诉"
								break;
							case 'ERROR_FOR_BUYER':
								data[i].text = "买家责任"
								break;
							case 'ERROR_FOR_SELLER':
								data[i].text = "卖家责任"
								break;
							case 'CONFIRMED':
								data[i].text = "已确认"
								break;
							case 'SELLER_OVERTIME':
								data[i].text = "超时自动确认"
								break;
							case 'CANCELLED_SELLER':
								data[i].text = "卖家确认申诉"
								break;
							default:
								break;
						}
					}
					if (than.page == 1) {
						than.list = data;
					} else {
						than.list = than.list.concat(data)
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F4F4F7;
	}

	.top {
		display: flex;
		align-items: center;
		height: 100rpx;

		.cut {
			margin-left: auto;
			width: 180rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			justify-content: center;

			image {
				margin-left: 15rpx;
				width: 24rpx;
				height: 14rpx;
			}
		}
	}

	.content {
		padding: 0 36rpx;

		.date {
			.time {
				height: 112rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.view {
					height: 40rpx;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 2rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					padding: 0 11rpx;
				}
			}

			.list {
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 10rpx 0;

				.view {
					display: flex;
					align-items: center;
					height: 50rpx;

					.name {
						text-align: center;
						width: 162rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}

					.text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}
			}
		}
	}
</style>
